<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="form-inline"/>
      <el-form :inline="true" class="form-inline">
        <el-form-item label="平台名称" size="mini">
          <el-select v-model="queryCondition.platformName" placeholder="平台名称" style="width: 150px" class="filter-item" >
            <el-option v-for="item in platformOptions" :key="item.name" :label="item.name===''?'全部':item.describe+'('+item.name+')'" :value="item.name===''?'':item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="部署环境" size="mini">
          <el-select v-model="queryCondition.env" placeholder="部署环境" clearable style="width: 150px" class="filter-item" >
            <el-option v-for="item in envOptions" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="级别" size="mini">
          <el-select v-model="queryCondition.level" placeholder="级别" clearable style="width: 150px" class="filter-item" >
            <el-option v-for="item in levelOptions" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="规则ID" size="mini">
          <el-input v-model="queryCondition.ruleId" placeholder="规则ID" style="width: 150px;" class="filter-item" clearable/>
        </el-form-item>
        <el-form-item label="日期范围" size="mini">
          <el-date-picker
            v-model="dateRange"
            :picker-options="pickerOptions"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="filter-item"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>

        <el-button v-waves class="filter-item" type="success" size="mini" icon="el-icon-search" @click="handleSearchAlertLogList">查询告警日志</el-button>

      </el-form>
      <el-table :data="alertLogList" border style="width: 100%" >
        <el-table-column prop="alertTime" label="告警时间" width="200"/>
        <el-table-column prop="ruleId" label="告警规则ID" width="100"/>
        <el-table-column prop="platformName" label="平台名称" width="100"/>
        <el-table-column prop="env" label="部署环境" width="100"/>
        <el-table-column prop="level" label="级别" width="100"/>
        <el-table-column prop="problemPeriod" label="连续报警次数" width="100"/>
        <el-table-column prop="title" label="告警内容" width=""/>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="success" size="mini" class="tag" style="margin: 0px" @click="displayLogDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page="queryCondition.pageNum" :limit="queryCondition.pageSize" layout="total, sizes, prev, pager, next" @pagination="handlePageChange" />

      <el-dialog :visible.sync="logDetailVisible" title="报警详细信息" width="80%" top="2vh" >
        <el-form :inline="true">
          <el-form-item label="告警时间:" >
            <el-tag type="info">{{ logDetail.alertTime }}</el-tag>
          </el-form-item>
          <el-form-item label="告警规则ID:" >
            <el-tag type="info">{{ logDetail.ruleId }}</el-tag>
          </el-form-item>
          <el-form-item label="平台标识:" >
            <el-tag type="info">{{ logDetail.platformName }}</el-tag>
          </el-form-item>
          <el-form-item label="部署环境:" >
            <el-tag type="info">{{ logDetail.env }}</el-tag>
          </el-form-item>
          <el-form-item label="预警值:" >
            <el-tag type="info">{{ logDetail.triggerCount }}</el-tag>
          </el-form-item>
          <el-form-item label="实际值:" >
            <el-tag type="info">{{ logDetail.actualCount }}</el-tag>
          </el-form-item>
          <el-form-item label="连续报警次数:" >
            <el-tag type="info">{{ logDetail.problemPeriod }}</el-tag>
          </el-form-item>
          <el-form-item label="级别:" >
            <el-tag type="info">{{ logDetail.level }}</el-tag>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="查询条件:" >
            <el-tag type="info">{{ logDetail.queryString }}</el-tag>
          </el-form-item>
          <el-form-item label="邮箱通知:" >
            <el-tag type="info">{{ logDetail.emails }}</el-tag>
          </el-form-item>
          <el-form-item label="企业微信通知:" >
            <el-tag type="info">{{ logDetail.qywxEmails }}</el-tag>
          </el-form-item>
        </el-form>
        <el-form >
          <el-form-item label="告警内容:" >
            {{ logDetail.title }}
            <el-input
              :autosize="{ minRows: 15,maxRows: 20}"
              v-model="logDetail.message"
              type="textarea"
              placeholder=""/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="paramsVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { searchPlatformList, searchAlertLogList } from '@/api/settings.js'
export default {
  name: 'Settings',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      fullscreenLoading: false,
      alertLogList: [],
      platformOptions: [],
      envOptions: ['dev', 'test', 'pre', 'product'],
      levelOptions: ['L0', 'L1', 'L2', 'L3'],
      dateRange: undefined,
      pickerOptions: {
        shortcuts: [{
          text: '最近1天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近7天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      queryCondition: {
        pageNum: 1,
        pageSize: 10,
        platformName: '',
        ruleId: '',
        env: '',
        level: '',
        fromDate: '',
        toDate: ''
      },
      logDetailVisible: false,
      logDetail: {
      },
      total: 0

    }
  },
  created() {
    searchPlatformList().then(response => {
      if (response.code === '0000') {
        this.platformOptions = response.data
      }
    })
    this.handleSearchAlertLogList()
  },
  methods: {
    handleSearchAlertLogList() {
      this.queryCondition.fromDate = (this.dateRange === undefined || this.dateRange === null) ? '' : this.dateRange[0]
      this.queryCondition.toDate = (this.dateRange === undefined || this.dateRange === null) ? '' : this.dateRange[1]
      searchAlertLogList(this.queryCondition).then(response => {
        if (response.code === '0000') {
          this.alertLogList = response.data
          this.total = response.page.totalCount
        }
      })
    },
    handlePageChange(data) {
      this.queryCondition.pageNum = data.page
      this.queryCondition.pageSize = data.limit
      this.handleSearchAlertLogList()
    },
    displayLogDetail(data) {
      this.logDetailVisible = true
      this.logDetail = data
    }

  }
}
</script>
<style>
  .app-container .pagination-container{
    margin-top: 0px;
    text-align: center;
  }
</style>

